import React, { memo, useState } from "react";
import { Field } from "react-vant";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import { Area } from "react-vant";
import style from "./index.module.scss";
import { areaList } from "@vant/area-data";
const Index: React.FC = memo(() => {
  const navigate = useNavigate();
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [value3, setValue3] = useState("");
  const formatter = (val) => val.replace(/\d/g, "");
  const [value, setValue] = React.useState([""]);

  const baocun = () => {
    console.log(value1, value2, value3, value);
    // 保存到本地
    localStorage.setItem(
      "address",
      JSON.stringify({ value1, value2, value3, value })
    );
    navigate("/shouhuodizhi",{replace:true});
  };
  return (
    <div>
      <NavBar
        title="新增地址"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      <Field
        value={value1}
        label="姓名"
        formatter={formatter}
        placeholder="收货人姓名"
        onChange={setValue1}
      />
      <Field
        value={value2}
        label="电话"
        formatter={formatter}
        formatTrigger="onBlur"
        placeholder="收货人手机号"
        onChange={setValue2}
      />
      <Area
        popup={{
          round: true,
        }}
        title="标题"
        areaList={areaList}
        onConfirm={(val: string[], options: AreaColumnOption[]) => {
          let k = []
          options.forEach((item)=>{
           k.push(item.text)
          })
          setValue(k)
        }}
      >
        {(_, selectRows, actions) => {
          return (
            <Field
              label="选择地区"
              value={selectRows.map((row) => row?.text).join(",")}
              onClick={() => actions.open()}
            />
          );
        }}
      </Area>
      <Field
        value={value3}
        label="详细地址"
        formatter={formatter}
        formatTrigger="onBlur"
        placeholder="详细地址"
        onChange={setValue3}
      />

      <button className={style.baocun} onClick={baocun}>
        保存
      </button>
    </div>
  );
})

export default Index;
